<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Web Shop</title>
<!-- Main style -->
<link rel="stylesheet" href="css/main.css" type="text/css" />

<!-- Fancybox style -->
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<!-- Product slider style -->
<link rel="stylesheet" href="css/product-slider.css" type="text/css" />

<!-- Style for the superfish navigation menu -->
<link rel="stylesheet" href="superfish/superfish.css" type="text/css" media="screen" />

<!-- Style for Megamenu -->
<link rel="stylesheet" href="css/megamenu.css" type="text/css" /> 

<!-- Style for price range slider -->
<link rel="stylesheet" href="jQueryUI/css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="jQueryUI/css/ui.slider.extras.css" type="text/css" />

<!-- Google font -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Qwigley' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css' />

<!-- JS for jQuery -->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<!-- JS for jQuery Product slider -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

<!-- JS for jQuery Fancy Box -->
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<!-- JS for superfish navigation menu -->
<script type="text/javascript" src="superfish/hoverIntent.js"></script> 
<script type="text/javascript" src="superfish/superfish.js"></script> 

<!-- JS for price range slider -->
<script type="text/javascript" src="jQueryUI/js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="jQueryUI/js/selectToUISlider.jQuery.js"></script>

<script type="text/javascript">
	
	// Megamenu
	$(function() {
						
		var $menu = $('#ldd_menu');
		
		$menu.children('li').each(function(){
			var $this = $(this);
			var $span = $this.children('span');
			$span.data('width',$span.width());
			
			$this.bind('mouseenter',function(){
				$menu.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':'auto'},150,function(){
					$this.find('.ldd_submenu').slideDown(300);
				});
			}).bind('mouseleave',function(){
				$this.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':$span.data('width')+'px'},300);
			});
		});
	});
	
	$(document).ready(function() {
		
		// Navigation menu
		$("ul.sf-menu").superfish(); 
		
		// Slider
		$(".slider").scrollable();
	
		// Fancybox
		$("a.grouped-elements").fancybox({
			'titlePosition'	: 'inside'
		});

		$("a[rel=group4]").fancybox({
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'titlePosition' 	: 'over',
			'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
				return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
			}
		});
		
		// Mouseover effect for thumbnails
		$("a.grouped-elements").hover(function() {
			  $(this).find(".imagehover").toggleClass("mouseon");
		});
		
		// Price range
		$('select#valueA, select#valueB').selectToUISlider();

		// Dropdown show/hide
		jQuery(".dropdown").click(function() {

      	jQuery(this).find("ul").toggle();
			jQuery(this).find("a.nav-link").toggleClass('selected');
		});
      
		// Closing the menu if click outside
		jQuery(document).bind('click', function(e) {
			var $clicked = jQuery(e.target);
          
			if (! $clicked.parents().hasClass("dropdown")) {
				jQuery(this).find('.dropdown a.nav-link').removeClass("selected");
				jQuery(".dropdown ul").hide();
			}
          
		});
      
	});

	$(window).load(function() {
		
	});
		
</script>

</head>
<body>

<div id="container">

	<div id="header-top">
		<p>
			<strong>FREE</strong> delivery on orders over $100. Add promo code <span class="promocode">FREEDEV</span> at checkout. Expires 12 March
		</p>
	</div>
	
	<div class="header-main">
		<div class="logo">
			<a href="index.html" name="top"><img src="images/logo.png" alt="logo" border="0"/></a>
		</div>
		
		<div class="login-block">
			<span class="account"><a href="#" class="account">Sign In</a></span> <span class="cart"><a href="cart.html" class="cart">My Cart (0)</a></span>
		</div>
	</div>
	
	<div id="navigation">
		
		<div class="search-container">
			<div class="search-inner">	
				<input type="text" value="I am looking for..." onfocus="if(this.value=='I am looking for...'){this.value=''};" onblur="if(this.value==''){this.value='I am looking for...'};" class="search-field"/>
				<input type="submit" id="s_submit" value="" class="search-btn"/>
			</div>
		</div>
		<div class="navigation-inner">
			<div class="flare"></div>
			<div class="home-icon">
				<a href="index.html"><img src="images/home_icon.png" border="0"/></a>
			</div>
			<!-- Navigation start -->
			<ul class="sf-menu">
				<li class="nav-item"><a href="#">Pages</a>
					<ul>
						<li class="sfish-navgiation-item">
							<a href="price_compare.html">Price Compare Table</a>
						</li>
						<li class="sfish-navgiation-item">
							<a href="faq.html">FAQ</a>
						</li>
						<li class="sfish-navgiation-item">
							<a href="cart.html">Shopping Cart</a>
						</li>
						<li class="sfish-navgiation-item">
							<a href="right_sidebar.html">Right Sidebar</a>
						</li>
					</ul>
				</li>
				<li class="nav-item"><a href="grid.html">Online Store</a>
					<ul>
						<li class="sfish-navgiation-item">
							<a href="grid.html">Product Listing as Grid</a>
						</li>
						<li class="sfish-navgiation-item">
							<a href="list.html">Product Listing as List</a>
						</li>
						<li class="sfish-navgiation-item last">
							<a href="details.html">Product Details</a>
						</li>
					</ul>	
				</li>
				<li class="nav-item"><a href="blog.html">Blog</a></li>
				<li class="nav-item"><a href="#">Shortcodes</a>
					<ul>
						<li class="sfish-navgiation-item">
							<a href="shortcodes_buttons.html">Buttons and Links</a>
						</li>
						<li class="sfish-navgiation-item">
							<a href="shortcodes_columns.html">Columns</a>
						</li>
						<li class="sfish-navgiation-item last">
							<a href="shortcodes_tabs.html">Tabs and Accordions</a>
						</li>
					</ul>	
				</li>
				<li class="nav-item"><a href="#">Portfolio</a>
					<ul>
						<li class="sfish-navgiation-item">
							<a href="portfolio_2columns.html">Two Columns Layout</a>
						</li>
						<li class="sfish-navgiation-item">
							<a href="portfolio_3columns.html">Three Columns Layout</a>
						</li>
						<li class="sfish-navgiation-item last">
							<a href="portfolio_4columns.html">Four Columns Layout</a>
						</li>
					</ul>
				</li>
				<li class="nav-item"><a href="contacts.html">Contacts</a></li>
			</ul>
			<!-- Navigation end -->
			
			<!-- Megamenu Begin -->
			<ul id="ldd_menu" class="ldd_menu">
				<li>
					<span>Mega Menu</span><!-- Increases to 510px in width-->
					<div class="ldd_submenu">
						<div class="mega-menu-text float-left">
							<h4>What is Mega Menu?</h4>
							Mega menu is a next step of the js based dropdown. It's similar to a normal menu in terms of general behaviour, but enriched with more options, multiple links, complex navigation, form elements like login, search and much more.
						</div>
						<div class="mega-menu-text float-right">
							<h4>Example</h4>
							<p class="newsletter">
								<input type="text" class="megamenu-field" onblur="if(this.value==''){this.value='Enter your e-mail...'};" onfocus="if(this.value=='Enter your e-mail...'){this.value=''};" value="Enter your e-mail...">
							</p>
							<p class="newsletter">
								<input type="text" class="megamenu-field" onblur="if(this.value==''){this.value='Enter your name...'};" onfocus="if(this.value=='Enter your name...'){this.value=''};" value="Enter your name...">
							</p>
						</div><br class="clear"/>
						<div class="mega-menu-text float-left">
							<h4>Why do I need it?</h4>
							Because you can create much more interesting and complex navigation systems, grouping links, improve the UI, improve the user's workflow while filling forms, signing in etc.
						</div>
						<div class="mega-menu-text float-right">
							<h4>Another example</h4>
							<img src="images/slide_small1.jpg">
							<img src="images/slide_small3.jpg">
							<img src="images/slide_small2.jpg">
						</div>
					</div>
				</li>
			</ul>
			<!-- Megamenu End -->
			
		</div>
	</div>

	<div id="content">
	
		<div class="content-top"></div>
		<div class="content-inner">
			
			<!-- List Begin -->
			
			<div class="breadcrumbs">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Pages</a></li>
					<li class="last">Frequently Asked Questions</li>
				</ul>
				<br class="clear"/>
			</div>
			
			<!-- Left Column Begin -->
			<div class="left-side float-left">
				<h3>FAQ Categories</h3>
				<ul>
					<li><a href="#">General</a></li>
					<li><a href="#">Shipping</a></li>
					<li>Returns & Exchange</li>
					<li><a href="#">Measurement Guide</a></li>
					<li><a href="#">Order Status</a></li>
					<li><a href="#">Technical Issues</a></li>
				</ul>
				
			</div>
			<!-- Left Column End -->
			
			<!-- Main Column Begin -->
			<div class="main-content">
				<h3>Returns & Exchange</h3>
				<a name="top"></a>

				 	
					<ul class="faq-item">
						
						<!-- FAQ Item Begin -->
				 		<li>
				 			<dl>
				 				<dd>
				 					<span class="question-symbol">
				 						Q:
				 					</span>
				 					<p class="question">Aenean gravida convallis laoreet?</p>
				 				</dd>
				 				<dd>
				 					<span class="answer-symbol">
				 						A:
				 					</span>
				 					<p>Nam mattis interdum enim ac tempus. Proin pharetra ligula at tortor facilisis rutrum. Aenean bibendum purus fermentum dui fringilla rutrum. Nullam pretium arcu eget leo laoreet pellentesque. Sed tincidunt nunc sit amet nunc lacinia facilisis. Vestibulum rhoncus fringilla viverra. Mauris id est neque, sed scelerisque orci. Etiam vel volutpat leo. Nullam eget leo odio. Nunc sit amet tincidunt purus. In vel odio nibh. </p>
				 				</dd>
				 				<dd>
				 					<a href="#top" class="regular" title="Back to top">Back to top</a>
				 				</dd>
				 			</dl>
				 		</li>
				 		<!-- FAQ Item End -->
				 		
				 		<!-- FAQ Item Begin -->
				 		<li>
				 			<dl>
				 				<dd>
				 					<span class="question-symbol">
				 						Q:
				 					</span>
				 					<p class="question">Sed id ante massa, at pretium turpis?</p>
				 				</dd>
				 				<dd>
				 					<span class="answer-symbol">
				 						A:
				 					</span>
				 					<p>Integer lectus tellus, dapibus tincidunt dapibus dapibus, hendrerit vitae tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar pulvinar dolor, at hendrerit mauris congue a. Curabitur fringilla velit ut odio rhoncus tempus. Proin et leo in leo posuere euismod ut at sem. </p>
				 				</dd>
				 				<dd>
				 					<a href="#top" class="regular" title="Back to top">Back to top</a>
				 				</dd>
				 			</dl>
				 		</li>
				 		<!-- FAQ Item End -->
				 		
				 		<!-- FAQ Item Begin -->
				 		<li>
				 			<dl>
				 				<dd>
				 					<span class="question-symbol">
				 						Q:
				 					</span>
				 					<p class="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
				 				</dd>
				 				<dd>
				 					<span class="answer-symbol">
				 						A:
				 					</span>
				 					<p>Curabitur eleifend velit eu enim dignissim vitae cursus libero bibendum. Sed leo eros, egestas in iaculis at, suscipit in erat. Aenean in est augue. Morbi ante massa, rutrum in rhoncus at, semper nec eros. Suspendisse diam diam, vestibulum vel scelerisque et, ultricies at ante. Quisque in ultrices leo. Ut nisl ipsum, congue vel lobortis vitae, vehicula eget ante. Sed dui ante, dictum vel aliquam ut, commodo a arcu. </p>
				 				</dd>
				 				<dd>
				 					<a href="#top" class="regular" title="Back to top">Back to top</a>
				 				</dd>
				 			</dl>
				 		</li>
				 		<!-- FAQ Item End -->
				 		
				 		<!-- FAQ Item Begin -->
				 		<li>
				 			<dl>
				 				<dd>
				 					<span class="question-symbol">
				 						Q:
				 					</span>
				 					<p class="question">Aenean gravida convallis laoreet?</p>
				 				</dd>
				 				<dd>
				 					<span class="answer-symbol">
				 						A:
				 					</span>
				 					<p>Nam mattis interdum enim ac tempus. Proin pharetra ligula at tortor facilisis rutrum. Aenean bibendum purus fermentum dui fringilla rutrum. Nullam pretium arcu eget leo laoreet pellentesque. Sed tincidunt nunc sit amet nunc lacinia facilisis. Vestibulum rhoncus fringilla viverra. Mauris id est neque, sed scelerisque orci. Etiam vel volutpat leo. Nullam eget leo odio. Nunc sit amet tincidunt purus. In vel odio nibh. </p>
				 				</dd>
				 				<dd>
				 					<a href="#top" class="regular" title="Back to top">Back to top</a>
				 				</dd>
				 			</dl>
				 		</li>
				 		<!-- FAQ Item End -->
				 		
				 		<!-- FAQ Item Begin -->
				 		<li>
				 			<dl>
				 				<dd>
				 					<span class="question-symbol">
				 						Q:
				 					</span>
				 					<p class="question">Sed id ante massa, at pretium turpis?</p>
				 				</dd>
				 				<dd>
				 					<span class="answer-symbol">
				 						A:
				 					</span>
				 					<p>Integer lectus tellus, dapibus tincidunt dapibus dapibus, hendrerit vitae tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar pulvinar dolor, at hendrerit mauris congue a. Curabitur fringilla velit ut odio rhoncus tempus. Proin et leo in leo posuere euismod ut at sem. </p>
				 				</dd>
				 				<dd>
				 					<a href="#top" class="regular" title="Back to top">Back to top</a>
				 				</dd>
				 			</dl>
				 		</li>
				 		<!-- FAQ Item End -->
				 		
				 		<!-- FAQ Item Begin -->
				 		<li>
				 			<dl>
				 				<dd>
				 					<span class="question-symbol">
				 						Q:
				 					</span>
				 					<p class="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
				 				</dd>
				 				<dd>
				 					<span class="answer-symbol">
				 						A:
				 					</span>
				 					<p>Curabitur eleifend velit eu enim dignissim vitae cursus libero bibendum. Sed leo eros, egestas in iaculis at, suscipit in erat. Aenean in est augue. Morbi ante massa, rutrum in rhoncus at, semper nec eros. Suspendisse diam diam, vestibulum vel scelerisque et, ultricies at ante. Quisque in ultrices leo. Ut nisl ipsum, congue vel lobortis vitae, vehicula eget ante. Sed dui ante, dictum vel aliquam ut, commodo a arcu. </p>
				 				</dd>
				 				<dd>
				 					<a href="#top" class="regular" title="Back to top">Back to top</a>
				 				</dd>
				 			</dl>
				 		</li>
				 		<!-- FAQ Item End -->
				 		
					</ul>
					
			</div>
			<!-- Main Column End -->
			
			<br class="clear"/>
			
			<!-- List End -->
			
		</div>
		<div class="shadow"></div>
		
		<br class="clear"/>
	</div>

	<div id="footer">
		<div class="footer-main">
			
			<div class="back-to-top"><a href="#top"><img src="images/top.png" alt="Back to top" border="0"/></a></div>
			
			<!-- Footer Column 1 Begin -->
			<div class="left-column float-left">
				<h5>Quick navigation</h5>
				<ul class="footer-nav">
					<li class="first"><a href="#">Customer support 24/7</a></li>
					<li><a href="#">Shipping information</a></li>
					<li><a href="#">Terms and conditions</a></li>
					<li><a href="#">Legal notice</a></li>
					<li><a href="#">Return policy</a></li>
					<li><a href="#">FAQ</a></li>
				</ul>
			</div>
			<!-- Footer Column 1 End -->
			
			<!-- Footer Column 2 Begin -->
			<div class="middle-column float-left">
				<h5>Newsletter</h5>
				<p>Sign up for our newsletter to receive on a regular basis updates, hot offers, site news etc.</p>
				<p class="newsletter">
					<input type="text" value="Enter your e-mail..." onfocus="if(this.value=='Enter your e-mail...'){this.value=''};" onblur="if(this.value==''){this.value='Enter your e-mail...'};" class="newsletter-field"/>
					<input type="submit" id="go" value="GO" class="go-btn"/>
				</p>
			</div>
			<!-- Footer Column 2 End -->
			
			<!-- Footer Column 3 Begin -->
			<div class="left-column float-right">
				<h5>Contact us</h5>
				<p>Paris, France 12009<br/>
					Boulevard de Sevastopol 377, Building A, Office 177
				</p>
<p>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>
				<p>
					Phone: +33 123 456 and +33 456 789<br/>
					Fax: +33 123 456<br/>
					Email: <a href="#" class="footerlink">info@yoursite.com</a><br/>
				</p>
				<p>
					<a href="#" class="social"><img src="images/facebook.png" alt="facebook" border="0"/></a>
					<a href="#" class="social"><img src="images/vimeo.png" alt="vimeo" border="0"/></a>
					<a href="#" class="social"><img src="images/youtube.png" alt="youtube" border="0"/></a>
					<a href="#" class="social"><img src="images/twitter.png" alt="twitter" border="0"/></a>
					<a href="#" class="social"><img src="images/google.png" alt="google" border="0"/></a>
				</p>
			</div>
			<!-- Footer Column 3 End -->

		</div>
	</div>
</div>


</body>
</html>